$(function(){
    // 初始化富文本编辑器
        initEditor()

    // 1. 初始化图片裁剪器
        var $image = $('#image')
  
    // 2. 裁剪选项
        var options = {
            aspectRatio: 400 / 280,
            preview: '.img-preview'
        }
  
    // 3. 初始化裁剪区域
        $image.cropper(options)

    /*
    需求
        1：获取服务器数据，赋值给文章类别下拉菜单
           1.1 声明空数组,forEach遍历响应数据生成option
           1.2 通过join('')方法将遍历完成的数组拼接成无缝字符串添加至页面
           1.3 单选、多选、下拉菜单有默认样式，三方框架一般隐藏用其他标签渲染 form.render()
        2.选择文章封面
           2.1 点击选择封面按钮,触发file(隐藏掉)的点击事件
           2.2 file的change事件触发时,将图片文件转为url地址-->URL.creatObjectURL(文件)
           2.3 销毁原来展示区的图片,赋值为新URL,渲染页面-->$image.cropper('destroy').attr(src,'URL').cropper(options)
        3.声明全局变量存储按钮点击状态-->开发文档需要，后面提交时赋值给FormData
           3.1 点击发布，给该全局变量赋值为'发布'
           3.2 点击草稿，给该全局变量赋值为'草稿'
        4.发布文章：根据api需求，上传文件为FormData格式-->基于表单新建一个FormData对象
           4.1 new FormData(表单)
           4.2 给fd对象添加状态 fd.append('',全局变量)
           4.3 给fd对象添加blob格式数据
              4.3.1 将展示区的图片新建画布转为blob格式的数据
                a. $image.cropper('getCroppedCanvas',{width:400,height:280})-->新建画布
                b. 调用toBlob()方法将该画布转化为blob格式的数据
              4.3.2 转化过程是异步的,所以后续操作写在toBlob()方法的回调函数中toBlob(function(形参){})
                a. 注意，在toBlob()方法中,已经将二进制的Blob格式数据传入回调函数的形参中-->回调函数中的形参可直接使用
                b. fd.append('',形参)-->给fd对象添加blob格式数据
                c. 发起axios请求-->同样需要写在回调函数内
    */ 

        let layer = layui.layer
        let form  = layui.form
        let state   //需求三的全局变量
        // 1：获取服务器数据，赋值给文章类别下拉菜单-->封装函数,功能包装
        initArtCateSel()
        function initArtCateSel(){
            axios({
                method:'GET',
                url:'/my/article/cates',
            }).then(({data:res})=>{
                if(res.status) return layer.msg(res.message)
                // console.log(res)
                let arr = ['<option value="">请输入文章类别</option>']
                res.data.forEach(ele=>{
                    // 过滤脏数据-->forEach遍历使用return会继续循环，等循环完毕再退出函数
                    if(res.data.Id<0) return
                    arr.push(`
                        <option value="${ele.Id}">${ele.name}</option>
                    `)
                })
                $('select').empty().html(arr.join(''))
                // 调用三方框架重新渲染下拉菜单样式
                form.render()
            })
        }

        // 2.选择文章封面
        $('#chooseBtn').on('click',function(){
            $('#chooseImg').click()
        })
        // 2.2 file的change事件触发时,将图片文件转为url地址-->URL.creatObjectURL(文件)
        $('#chooseImg').on('change',function(){
            // console.log(this.files[0]);  注意：files属性是dom原生file对象才有的
            if(!this.files[0]) return layer.msg('请选择图片')
            let imgURL = URL.createObjectURL(this.files[0])
            //2.3 销毁原来展示区的图片,赋值为新URL,渲染页面-->$image.cropper('destroy').attr(src,'URL').cropper(options)
            $image.cropper('destroy').attr('src',imgURL).cropper(options)
        })

        // 3.声明全局变量存储按钮点击状态-->开发文档需要，后面提交时赋值给FormData
        $('#btn1').on('click',function(){
            state='已发布'
        })
        $('#btn2').on('click',function(){
            state='草稿'
        })

        // 4.根据api需求，上传文件为FormData格式-->基于表单新建一个FormData对象:这里的表单也需要是原生对象
        $('#pubForm').on('submit',function(e){
            e.preventDefault()
            let fd = new FormData(this)
            fd.append("state",state)
            $image.cropper('getCroppedCanvas',{
                width:400,
                height:280
            }).toBlob(function(blob){
                fd.append('cover_img',blob)
                console.log(...fd)
                // 发送请求
                axios({
                    method:'POST',
                    url:'/my/article/add',
                    data:fd
                }).then(({data:res})=>{
                    console.log(res)
                    if(res.status) return layer.msg(res.message)
                    if(state=='已发布'){
                        layer.msg("恭喜您，发布文章成功")
                    }else {
                        layer.msg("恭喜您，发布草稿成功")
                    }
                    // 跳转页面
                })
            })
        })











})